<!-- 
文件名称: user_management.html
完整存储路径: frontend/templates/user_management.html
功能说明: 
    用户管理页面，展示用户列表，支持创建、编辑、删除用户。用户列表动态加载并支持操作按钮。
    提供一个创建用户的表单，支持用户名、密码、角色的输入。
使用说明:
    该页面通过AJAX请求从后端API获取用户数据并展示，支持对用户的增删改操作。
    后端接口需要提供相应的API支持。
-->

{% extends "layouts/base.html" %}
<!-- 继承基础模板 -->

{% block title %}用户管理 - 近视预防干预系统{% endblock %} 

{% block additional_css %}
<style>
  /* 用户管理表格优化 */
  .table th {
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    vertical-align: middle;
    line-height: 1.2;
  }
  
  .table td {
    vertical-align: middle;
    font-size: 0.875rem;
    padding: 0.75rem 0.5rem;
  }
  
  .table th:first-child,
  .table td:first-child {
    text-align: center;
    width: 50px;
  }
  
  .table th:last-child,
  .table td:last-child {
    text-align: center;
    width: 180px;
  }
  
  /* 表格内按钮组优化 */
  .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  /* 状态标签样式 */
  .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
  }
  
  /* 表格响应式优化 */
  @media (max-width: 768px) {
    .table-responsive {
      font-size: 0.8rem;
    }
    
    .btn-group-sm .btn {
      padding: 0.2rem 0.4rem;
      font-size: 0.7rem;
    }
  }
  
  /* 分页信息样式 */
  .table-info {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.875rem;
  }
</style>
{% endblock %}

{% block content %}
<main class="main-content-container">
  <div class="user-management-content">
    <div class="page-header">
      <h1><i class="bi bi-people"></i> 用户管理中心</h1>
      <p class="text-muted">管理系统用户、角色分配和权限控制</p>
    </div>

    <!-- 高级筛选器 -->
    <div class="card mb-4">
      <div class="card-header">
        <h5 class="card-title mb-0">
          <i class="bi bi-funnel"></i> 高级筛选器
          <button class="btn btn-sm btn-outline-secondary float-end" id="resetFiltersBtn">
            <i class="bi bi-arrow-clockwise"></i> 重置
          </button>
        </h5>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <!-- 第一行筛选 -->
          <div class="col-md-3">
            <label for="userTypeFilter" class="form-label">用户类型</label>
            <select class="form-select" id="userTypeFilter">
              <option value="">全部类型</option>
              <option value="web">PC端用户</option>
              <option value="miniprogram">小程序用户</option>
            </select>
          </div>
          <div class="col-md-3">
            <label for="roleFilter" class="form-label">角色</label>
            <select class="form-select" id="roleFilter">
              <option value="">全部角色</option>
              <!-- 动态加载角色选项 -->
            </select>
          </div>
          <div class="col-md-3">
            <label for="statusFilter" class="form-label">状态</label>
            <select class="form-select" id="statusFilter">
              <option value="">全部状态</option>
              <option value="active">激活</option>
              <option value="pending">待审核</option>
              <option value="suspended">暂停</option>
              <option value="blocked">封禁</option>
            </select>
          </div>
          <div class="col-md-3">
            <label for="filterBindStatus" class="form-label">绑定学生</label>
            <select class="form-select" id="filterBindStatus">
              <option value="">全部绑定状态</option>
              <option value="unbound">未绑定学生</option>
              <option value="bound">已绑定学生</option>
            </select>
          </div>
          
          <!-- 第二行筛选 -->
          <div class="col-md-4">
            <label for="filterDateFrom" class="form-label">注册时间（从）</label>
            <input type="date" class="form-control" id="filterDateFrom">
          </div>
          <div class="col-md-4">
            <label for="filterDateTo" class="form-label">注册时间（到）</label>
            <input type="date" class="form-control" id="filterDateTo">
          </div>
          <div class="col-md-4">
            <label for="dateRangeFilter" class="form-label">时间范围</label>
            <select class="form-select" id="dateRangeFilter">
              <option value="">全部时间</option>
              <option value="today">今天</option>
              <option value="week">最近一周</option>
              <option value="month">最近一个月</option>
              <option value="quarter">最近三个月</option>
            </select>
          </div>
          <div class="col-md-4">
            <label for="quickSearch" class="form-label">快速搜索</label>
            <div class="input-group">
              <input type="text" class="form-control" id="quickSearch" placeholder="用户名/真实姓名/手机号/邮箱">
              <button class="btn btn-outline-secondary" type="button" id="searchBtn">
                <i class="bi bi-search"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="row mt-3">
          <div class="col-12">
            <button class="btn btn-primary" id="applyFiltersBtn">
              <i class="bi bi-check2"></i> 应用筛选
            </button>
            <span class="ms-3 text-muted" id="filterResultsCount">共 0 条记录</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作工具栏 -->
    <div class="card mb-4">
      <div class="card-body">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="btn-group" role="group">
              <button id="createUserBtn" class="btn btn-success">
                <i class="bi bi-person-plus"></i> 创建用户
              </button>
              <button id="inviteUserBtn" class="btn btn-info">
                <i class="bi bi-envelope"></i> 邀请用户
              </button>
              <button id="refreshUsersBtn" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-clockwise"></i> 刷新
              </button>
              <button id="exportUsersBtn" class="btn btn-outline-primary">
                <i class="bi bi-download"></i> 导出数据
              </button>
            </div>
          </div>
          <div class="col-md-6">
            <div class="btn-group float-end" role="group">
              <button id="batchRoleBtn" class="btn btn-outline-warning" disabled>
                <i class="bi bi-award"></i> 批量分配角色
              </button>
              <button id="batchStatusBtn" class="btn btn-outline-info" disabled>
                <i class="bi bi-toggles"></i> 批量状态变更
              </button>
              <button id="batchDeleteBtn" class="btn btn-outline-danger" disabled>
                <i class="bi bi-trash"></i> 批量删除
              </button>
            </div>
          </div>
        </div>
        
        <!-- 批量操作提示 -->
        <div class="alert alert-info mt-3" id="batchAlert" style="display: none;">
          <i class="bi bi-info-circle"></i>
          已选择 <span id="selectedCount">0</span> 个用户，请选择批量操作。
          <button class="btn btn-sm btn-outline-info ms-2" id="clearSelectionBtn">清除选择</button>
        </div>
      </div>
    </div>

    <!-- 用户列表表格 -->
    <div class="card">
      <div class="card-header">
        <h5 class="card-title mb-0">
          <i class="bi bi-table"></i> 用户列表
          <div class="float-end">
            <div class="btn-group btn-group-sm" role="group">
              <input type="checkbox" class="btn-check" id="selectAllUsers" autocomplete="off">
              <label class="btn btn-outline-secondary" for="selectAllUsers">
                <i class="bi bi-check-all"></i> 全选
              </label>
              <button class="btn btn-outline-secondary" id="refreshBtn">
                <i class="bi bi-arrow-clockwise"></i> 刷新
              </button>
            </div>
          </div>
        </h5>
      </div>
      <div class="card-body p-0">
        <!-- 统计信息 -->
        <div class="px-3 py-2 bg-light border-bottom">
          <small class="text-muted">
            <i class="bi bi-info-circle"></i>
            总用户数: <span id="totalUsersCount">0</span> | 
            筛选结果: <span id="filteredUsersCount">0</span> | 
            已选择: <span id="selectedUsersCount">0</span>
          </small>
        </div>

        <!-- 用户卡片容器 (for enhanced version, initially hidden) -->
        <div id="userCardsContainer" class="row p-3" style="display: none;">
          <!-- 用户卡片将由JavaScript动态生成 -->
        </div>

        <!-- 现有用户表格 -->
        <div id="userTableContainer">
          <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead class="table-light">
              <tr>
                <th style="width: 50px;">
                  <input type="checkbox" id="selectAllHeader" class="form-check-input">
                </th>
                <th style="min-width: 120px;">用户名</th>
                <th style="min-width: 80px;">用户<br>类型</th>
                <th style="min-width: 100px;">角色</th>
                <th style="min-width: 80px;">状态</th>
                <th style="min-width: 80px;">绑定<br>学生</th>
                <th style="min-width: 100px;">注册<br>时间</th>
                <th style="width: 180px;">操作</th>
              </tr>
            </thead>
            <tbody id="userList">
              <!-- 用户数据由JS动态渲染 -->
              <tr>
                <td colspan="8" class="text-center">
                  <div class="spinner-border" role="status">
                    <span class="visually-hidden">加载中...</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div> <!-- table-responsive end -->
        </div> <!-- userTableContainer end -->

        <!-- 分页控件 -->
        <div class="d-flex justify-content-between align-items-center p-3 border-top">
          <div>
            <span id="pageInfo" class="text-muted">第 1-10 项，共 0 项</span>
          </div>
          <div class="d-flex align-items-center gap-2">
            <label for="pageSizeSelect" class="form-label mb-0 me-2">每页显示:</label>
            <select id="pageSizeSelect" class="form-select form-select-sm" style="width: auto;">
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="50">50</option>
              <option value="100">100</option>
            </select>
            <div class="btn-group ms-3">
              <button id="prevPageBtn" class="btn btn-sm btn-outline-secondary" disabled>
                <i class="bi bi-chevron-left"></i> 上一页
              </button>
              <button id="nextPageBtn" class="btn btn-sm btn-outline-secondary">
                下一页 <i class="bi bi-chevron-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="card-footer">
        <div class="row align-items-center">
          <div class="col-md-6">
            <span class="text-muted" id="paginationInfo">显示第 1-10 条，共 0 条记录</span>
          </div>
          <div class="col-md-6">
            <nav aria-label="用户列表分页">
              <ul class="pagination pagination-sm mb-0 justify-content-end" id="pagination">
                <!-- 分页按钮动态生成 -->
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>

    </div>

    <!-- 加载覆盖层 -->
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
      <div class="loading-spinner"></div>
    </div>

    <!-- 创建/编辑用户表单弹窗 -->
    <div id="userFormModal" class="modal fade" tabindex="-1" style="display: none">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="userFormTitle">创建新用户</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" id="userFormCloseBtn"></button>
          </div>
          <div class="modal-body">
            <form id="userFormElement">
              <input type="hidden" id="editUserId" />
              
              <div class="row g-3">
                <!-- 基本信息 -->
                <div class="col-md-6">
                  <label for="username" class="form-label">用户名 <span class="text-danger">*</span></label>
                  <input type="text" id="username" name="username" required class="form-control" autocomplete="username" />
                </div>
                <div class="col-md-6">
                  <label for="real_name" class="form-label">真实姓名</label>
                  <input type="text" id="real_name" name="real_name" class="form-control" />
                </div>
                
                <div class="col-md-6">
                  <label for="mobile" class="form-label">手机号</label>
                  <input type="tel" id="mobile" name="mobile" class="form-control" />
                </div>
                <div class="col-md-6">
                  <label for="email" class="form-label">邮箱</label>
                  <input type="email" id="email" name="email" class="form-control" />
                </div>
                
                <div class="col-md-6">
                  <label for="password" class="form-label">密码 <span class="text-danger" id="passwordRequired">*</span></label>
                  <input type="password" id="password" name="password" class="form-control" autocomplete="new-password" placeholder="编辑时留空表示不修改密码" />
                </div>
                <div class="col-md-6">
                  <label for="user_type" class="form-label">用户类型</label>
                  <select id="user_type" name="user_type" class="form-select">
                    <option value="web">PC端用户</option>
                    <option value="miniprogram">小程序用户</option>
                  </select>
                </div>
                
                <div class="col-md-6">
                  <label for="gender" class="form-label">性别</label>
                  <select id="gender" name="gender" class="form-select">
                    <option value="">请选择</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <label for="department" class="form-label">部门</label>
                  <input type="text" id="department" name="department" class="form-control" />
                </div>
                
                <div class="col-md-6">
                  <label for="position" class="form-label">职位</label>
                  <input type="text" id="position" name="position" class="form-control" />
                </div>
                <div class="col-md-6">
                  <label for="status" class="form-label">状态</label>
                  <select id="status" name="status" class="form-select">
                    <option value="active">激活</option>
                    <option value="pending">待审核</option>
                    <option value="suspended">暂停</option>
                    <option value="blocked">封禁</option>
                  </select>
                </div>
                
                <div class="col-12">
                  <label class="form-label">角色分配 <span class="text-danger">*</span></label>
                  <div id="roleCheckboxGroup" class="form-group border rounded p-3">
                    <!-- 角色复选框动态生成 -->
                  </div>
                </div>
                
                <div class="col-12">
                  <label for="remark" class="form-label">备注</label>
                  <textarea id="remark" name="remark" class="form-control" rows="3"></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="userFormCancelBtn">取消</button>
            <button type="submit" class="btn btn-primary" id="userFormSubmitBtn" form="userFormElement">
              <i class="bi bi-check2"></i> 保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 批量角色分配弹窗 -->
    <div id="batchRoleModal" class="modal fade" tabindex="-1" style="display: none">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">批量分配角色</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <p>为选中的 <span id="batchRoleUserCount">0</span> 个用户分配角色：</p>
            <div id="batchRoleCheckboxGroup" class="border rounded p-3">
              <!-- 角色复选框动态生成 -->
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="confirmBatchRoleBtn">确认分配</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 批量状态变更弹窗 -->
    <div id="batchStatusModal" class="modal fade" tabindex="-1" style="display: none">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">批量状态变更</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <p>为选中的 <span id="batchStatusUserCount">0</span> 个用户变更状态：</p>
            <select id="batchStatusSelect" class="form-select">
              <option value="active">激活</option>
              <option value="pending">待审核</option>
              <option value="suspended">暂停</option>
              <option value="blocked">封禁</option>
            </select>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-warning" id="confirmBatchStatusBtn">确认变更</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</main>
{% endblock %} {% block styles %} {{ super() }}
<!-- 继承base.html中的全局样式 -->
<!-- Bootstrap Icons -->
<link
  rel="stylesheet"
  href="https://unpkg.com/bootstrap-icons@1.7.2/font/bootstrap-icons.css"
/>
<!-- 增强版用户管理样式 -->
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/user_management_enhanced.css') }}"
/>
{% endblock %} {% block scripts %} {{ super() }}
<!-- 继承base.html中的全局脚本 -->
    <!-- API工具库 -->
    <script src="{{ url_for('static', filename='js/api-utils.js') }}"></script>
    <!-- 核心JavaScript -->
    <script src="{{ url_for('static', filename='js/user_management_enhanced.js') }}"></script>
    
    <style>
        /* 密码强度指示器样式 */
        .password-strength {
            height: 4px;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        .strength-text {
            font-size: 0.8em;
            margin-top: 4px;
        }
        
        /* 用户卡片样式 */
        .user-card {
            transition: all 0.3s ease;
            border: 1px solid #e9ecef;
        }
        
        .user-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        
        /* 状态徽章 */
        .status-badge {
            font-size: 0.75em;
            padding: 0.25em 0.5em;
        }
    </style>
</body>
</html>
{% endblock %}

